<template>
    <div class="app-container"
        style="border:1px solid #e6ebf5; width: 96%;margin-left: 2%;padding-left: 0;padding-right: 0;margin-top: 20px;">
        <el-row>
            <el-col :span="24">
                <!-- <CEVideo width="965" height="605" :src="videoUrl">
                </CEVideo> -->
                <video ref="video" class="video-js" controls preload="auto" :width="965" :height="600">
                    <source :src="videoUrl" type="video/mp4" />
                </video>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
    @import '~video.js/dist/video-js.min.css';
</style>

<script>
    import CEVideo from "@/components/video";
    import videojs from 'video.js'
    import { getCourseById } from '@/api/courseseries'
    export default {
        components: { CEVideo },
        data() {
            return {
                videoUrl: "https://qdlsstorage.blob.core.windows.net:443/asset-89590879-451b-47de-8642-9a99c60259d6/zxc-2.mp4?sv=2017-04-17&sr=c&si=4f500c84-38a9-4a34-93b7-488da75f6709&sig=RQlKiG%2BUsbkDaNuXGvEDAvIkU4b8cM2yx6QrjWtx1Ys%3D&se=2019-09-11T02%3A11%3A14Z",
                id: '',
                show:false
            }
        },
        created() {  // 实例创建完成后执行的代码
            this.id = this.$route.params && this.$route.params.id
            this.getModel()
        },
        mounted() {
            this.id = this.$route.params && this.$route.params.id
            this.getModel()
            console.log(this.videoUrl)
            
            // getCourseById(this.id).then(res => {
            //     if (res && res.data) {
            //         this.videoUrl = res.data.fileUrl
            //     }

            // })

        },
        methods: {
            async getModel() {
                var res = await getCourseById(this.id)
                if (res && res.data) {
                    this.videoUrl = res.data.fileUrl
                    videojs(this.$refs.video)
                }
            }
        }
    }
</script>